    import React from 'react';
    import { DownOutlined,UserOutlined,PoweroffOutlined } from '@ant-design/icons';
    import type { MenuProps } from 'antd';
    import { Dropdown, Space,message } from 'antd';
    import { clearToken } from '@/store/login/authSlice'
    import { useDispatch } from 'react-redux'
    import { useNavigate } from 'react-router-dom';
    const items: MenuProps['items'] = [
    {
        label: (
        <a target="_blank">
            个人中心
        </a>
        ),
        key: '0',
        icon:<UserOutlined />
    },
    {
        label: (
        <a target="_blank">
            退出登录
        </a>
        ),
        key: '1',
        icon:<PoweroffOutlined />
    },
    ];

    function MyHeader(){
        const dispatch = useDispatch()
        const navigate = useNavigate()
        const onClick:MenuProps['onClick']=({key})=>{
            console.log('key',key)
            if(key === '0'){
                navigate('/personal')
            }else{// 退出登录
                dispatch(clearToken())
                sessionStorage.removeItem('username')
            }
        }
    return <div>
        <Dropdown menu={{ items,onClick }}>
            <a onClick={(e) => e.preventDefault()}>
            <Space>
                您好{sessionStorage.getItem('username')}
                <DownOutlined />
            </Space>
            </a>
        </Dropdown>
    </div>
};

    export default MyHeader;